<template>
  <div class="project-filter-container">
    <van-tree-select
      :items="items"
      :main-active-index.sync="active"
    >
      <template #content>
        <!-- 选择产线 -->
        <ul
          class="filter-list"
          v-show="active === 0"
        >
          <li
            :class="{'color-primary': item.checked}"
            v-for="(item, index) in proLineList"
            :key="index"
            @click="chooseLine(item)"
          >
            <span>{{ item.number }}</span>
            <van-icon
              name="success"
              v-show="item.checked"
            />
          </li>
        </ul>
        <!-- 设备类型 -->
        <ul
          class="filter-list"
          v-show="active === 1"
        >
          <li
            :class="{'color-primary': item.checked}"
            v-for="(item, index) in deviceType"
            :key="index"
            @click="chooseDeviceType(item, index)"
          >
            <span>{{ item.text }}</span>
            <van-icon
              name="success"
              v-show="item.checked"
            />
          </li>
        </ul>
        <!-- 设备状态 -->
        <ul
          class="filter-list"
          v-show="active === 2"
        >
          <li
            :class="{'color-primary': item.checked}"
            v-for="(item, index) in statusData"
            :key="index"
            @click="chooseDeviceStatus(item, index)"
          >
            <span>{{ item.text }}</span>
            <van-icon
              name="success"
              v-show="item.checked"
            />
          </li>
        </ul>
      </template>
    </van-tree-select>

    <div class="operate-box">
      <div
        class="operate-btn cancel-btn"
        @click="cancelFn"
      >取 消</div>
      <div
        class="operate-btn"
        @click="submit"
      >确 定</div>
    </div>
  </div>
</template>

<script>
import { TreeSelect } from 'vant';
import { getProductLineList } from '@/api/projectManage';

export default {
  name: 'FilterDevice',
  props: {
    projectId: Number // 项目id
  },
  components: {
    [TreeSelect.name]: TreeSelect
  },
  data() {
    return {
      active: 0,
      // 左侧数据
      items: [
        { activeId: 1, text: '选择产线' },
        { activeId: 2, text: '设备类型' },
        { activeId: 3, text: '设备状态' }
      ],
      // 设备类型
      deviceTypeVal: '',
      deviceType: [
        { text: '搬运类', value: 1, checked: false },
        { text: '输送类', value: 2, checked: false },
        { text: '包装类', value: 3, checked: false },
        { text: '其他类', value: 4, checked: false }
      ],
      // 设备状态
      statusData: [
        { text: '离线', value: 1, checked: false },
        { text: '在线', value: 2, checked: false },
        // { text: '预警', value: 3 },
        { text: '报警', value: 4, checked: false }
      ],

      proLineList: [], // 产线列表
      allLineIds: [] // 所有产线id
    };
  },
  created() {
    this.getProductLineListEvent();
  },
  methods: {
    // 获取产线列表
    getProductLineListEvent() {
      const params = {
        project_id: this.projectId // 项目id
      };
      getProductLineList(params).then(res => {
        if (res.data.list && res.data.list.length) {
          res.data.list.map(item => {
            item.checked = false;
            this.allLineIds.push(item.ID);
          });
        }
        this.proLineList = res.data.list;
      });
    },
    // 选择产线
    chooseLine(item) {
      item.checked = !item.checked;
    },

    // 设备类型
    chooseDeviceType(item, index) {
      if (!item.checked) {
        this.deviceType.map((subItem, i) => {
          if (i === index) subItem.checked = true;
          else subItem.checked = false;
        });
      } else {
        item.checked = !item.checked;
      }
    },

    // 设备状态
    chooseDeviceStatus(item, index) {
      if (!item.checked) {
        this.statusData.map((subItem, i) => {
          if (i === index) subItem.checked = true;
          else subItem.checked = false;
        });
      } else {
        item.checked = !item.checked;
      }
    },

    // 确定
    submit() {
      const params = {
        project_line_id: '', // 产线id
        device_type_id: '', // 设备类型
        device_status: '' // 设备状态
      };
      // 判断产线是否选中
      let proLineIds = [];
      this.proLineList.map(item => {
        if (item.checked) proLineIds.push(item.ID);
      });
      if (proLineIds.length) params.project_line_id = proLineIds.join();
      else params.project_line_id = this.allLineIds.join();
      // 判断设备类型是否选中
      this.deviceType.map(item => {
        if (item.checked) params.device_type_id = item.value;
      });
      // 判断设备状态是否选中
      this.statusData.map(item => {
        if (item.checked) params.device_status = item.value;
      });
      this.$emit('submit', params);
    },
    // 取消
    cancelFn() {
      this.$parent.showProjectFilter = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.project-filter-container {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #fff;

  .van-tree-select {
    flex: 1;
    z-index: 999;
  }

  ::v-deep .van-sidebar-item--select::before {
    background-color: var(--color-primary);
  }

  .filter-list {
    padding: 0.16rem 0.426667rem;

    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 0.32rem 0;
      border-bottom: 1px solid var(--border-color);
    }
  }

  .operate-box {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0.213333rem 0.426667rem;
    background-color: #fff;

    .operate-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 4.32rem;
      height: 1.066667rem;
      color: #fff;
      font-size: 0.426667rem;
      border-radius: 0.106667rem;
      background-color: var(--color-primary);

      &.cancel-btn {
        color: var(--color-deep-gray);
        background-color: #fff;
        border: 1px solid var(--border-color);
      }
    }
  }
}
</style>